<template>
  <div class="app-container">
    <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData" >

      <template slot="blank_1540538511000_57848" slot-scope="scope">
        <!-- 出票日期从 -->
        <!-- 通过 v-model="scope.model.blank_1540538511000_57848" 绑定数据 -->
        <div class="block">
          <el-date-picker
            v-model="data0"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"/>
        </div>
      </template>
      <template slot="blank_1540538514000_93312" slot-scope="scope">
        <!-- 到期日期从 -->
        <!-- 通过 v-model="scope.model.blank_1540538514000_93312" 绑定数据 -->
        <div class="block">
          <el-date-picker
            v-model="data1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"/>
        </div>
      </template>
    </generate-form>
    <div class="generate-block">
      <el-button type="primary" @click="handleSubmit">查询</el-button>
      <el-button type="primary">重置</el-button>
    </div>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
export default {
  components: {
    GenerateForm
  },
  data: function() {
    return {
      data0: '',
      data1: '',
      jsonData: { 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'radio', 'name': '票据类型', 'icon': 'regular/dot-circle', 'options': { 'inline': true, 'defaultValue': '', 'showLabel': false, 'options': [{ 'value': '商票', 'label': '选项1' }, { 'value': '银票', 'label': '选项2' }], 'required': false, 'width': '100%', 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'BillingType' }, 'key': '1540537550000_95942', 'model': 'radio_1540537550000_95942', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '开票单位', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540538232000_40614' }, 'key': '1540538232000_40614', 'model': 'input_1540538232000_40614', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540537539000_96961' }, 'key': '1540537539000_96961', 'model': 'grid_1540537539000_96961', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '票据号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540538374000_54710' }, 'key': '1540538374000_54710', 'model': 'input_1540538374000_54710', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'radio', 'name': '开出方式', 'icon': 'regular/dot-circle', 'options': { 'inline': true, 'defaultValue': '', 'showLabel': false, 'options': [{ 'value': '对内自开', 'label': '选项1' }, { 'value': '对外自开', 'label': '选项2' }], 'required': false, 'width': '100%', 'remote': false, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'func_1540538389000_74852' }, 'key': '1540538389000_74852', 'model': 'radio_1540538389000_74852', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540538239000_36256' }, 'key': '1540538239000_36256', 'model': 'grid_1540538239000_36256', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'radio', 'name': '票据流通方式', 'icon': 'regular/dot-circle', 'options': { 'inline': true, 'defaultValue': '', 'showLabel': false, 'options': [{ 'value': '纸票', 'label': '选项1' }, { 'value': '电票', 'label': '选项2' }], 'required': false, 'width': '100%', 'remote': false, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'func_1540538445000_58985' }, 'key': '1540538445000_58985', 'model': 'radio_1540538445000_58985', 'rules': [] }] }, { 'span': 10, 'list': [] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540538441000_40921' }, 'key': '1540538441000_40921', 'model': 'grid_1540538441000_40921', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'blank', 'name': '出票日期从', 'icon': 'chalkboard', 'options': { 'defaultType': 'String', 'remoteFunc': 'func_1540538511000_57848' }, 'key': '1540538511000_57848', 'model': 'blank_1540538511000_57848', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'blank', 'name': '到期日期从', 'icon': 'chalkboard', 'options': { 'defaultType': 'String', 'remoteFunc': 'func_1540538514000_93312' }, 'key': '1540538514000_93312', 'model': 'blank_1540538514000_93312', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540538485000_51242' }, 'key': '1540538485000_51242', 'model': 'grid_1540538485000_51242', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '出票单位', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540539242000_33182' }, 'key': '1540539290000_89216', 'model': 'input_1540539242000_33182', 'rules': [{ 'type': 'string', 'message': '出票单位格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '承兑单位', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540539247000_50814' }, 'key': '1540539247000_50814', 'model': 'input_1540539247000_50814', 'rules': [{ 'type': 'string', 'message': '承兑单位格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540539238000_86256' }, 'key': '1540539238000_86256', 'model': 'grid_1540539238000_86256', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '付款账号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540539292000_69899' }, 'key': '1540539414000_85777', 'model': 'input_1540539292000_69899', 'rules': [{ 'type': 'string', 'message': '付款账号格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'select', 'name': '付款行', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'PayBank' }, 'key': '1540539337000_15987', 'model': 'select_1540539337000_15987', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540539279000_80564' }, 'key': '1540539279000_80564', 'model': 'grid_1540539279000_80564', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '收款单位全称', 'icon': 'regular/keyboard', 'options': { 'width': '', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540539415000_89175' }, 'key': '1540539713000_62493', 'model': 'input_1540539415000_89175', 'rules': [{ 'type': 'string', 'message': '收款单位全称格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '收款账号', 'icon': 'regular/keyboard', 'options': { 'width': '', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540539451000_7089' }, 'key': '1540539451000_7089', 'model': 'input_1540539451000_7089', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540539411000_95212' }, 'key': '1540539411000_95212', 'model': 'grid_1540539411000_95212', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'select', 'name': '收款开户行', 'icon': 'regular/caret-square-down', 'options': { 'defaultValue': '', 'multiple': false, 'disabled': false, 'clearable': false, 'placeholder': '', 'required': false, 'showLabel': false, 'width': '100%', 'options': [{ 'value': '下拉框1' }, { 'value': '下拉框2' }, { 'value': '下拉框3' }], 'remote': true, 'remoteOptions': [], 'props': { 'value': 'value', 'label': 'label' }, 'remoteFunc': 'gathering' }, 'key': '1540539501000_36076', 'model': 'select_1540539501000_36076', 'rules': [] }] }, { 'span': 10, 'list': [] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540539493000_6059' }, 'key': '1540539493000_6059', 'model': 'grid_1540539493000_6059', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '票面金额(小写)', 'icon': 'regular/keyboard', 'options': { 'width': '', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540539715000_78196' }, 'key': '1540539766000_4328', 'model': 'input_1540539715000_78196', 'rules': [{ 'type': 'string', 'message': '票面金额(小写)格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '票面金额(大写)', 'icon': 'regular/keyboard', 'options': { 'width': '', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540539741000_79797' }, 'key': '1540539741000_79797', 'model': 'input_1540539741000_79797', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540539704000_91263' }, 'key': '1540539704000_91263', 'model': 'grid_1540539704000_91263', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '摘要', 'icon': 'regular/keyboard', 'options': { 'width': '', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540539769000_83549' }, 'key': '1540539811000_83133', 'model': 'input_1540539769000_83549', 'rules': [{ 'type': 'string', 'message': '摘要格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '开票协议号', 'icon': 'regular/keyboard', 'options': { 'width': '', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540539787000_51883' }, 'key': '1540539787000_51883', 'model': 'input_1540539787000_51883', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540539761000_58527' }, 'key': '1540539761000_58527', 'model': 'grid_1540539761000_58527', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '合同号', 'icon': 'regular/keyboard', 'options': { 'width': '', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1540539812000_98846' }, 'key': '1540539812000_98846', 'model': 'input_1540539812000_98846', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'textarea', 'name': '多行文本', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'pattern': '', 'placeholder': '', 'remoteFunc': 'func_1540539900000_13109' }, 'key': '1540539900000_13109', 'model': 'textarea_1540539900000_13109', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1540539802000_44272' }, 'key': '1540539802000_44272', 'model': 'grid_1540539802000_44272', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }, 'table': { 'showRemove': false, 'showIndexCol': false, 'showEdit': true, 'showExport': false, 'showAdd': false, 'stripe': true, 'border': true }},
      editData: {},
      values: {},
      remoteFuncs: {

        BillingType(resolve) {
          // 票据类型 radio_1540537550000_95942
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('票据类型').then(response => { resolve(response.data) })
        },

        PayBank(resolve) {
          // 付款行 select_1540539337000_15987
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('付款行').then(response => { resolve(response.data) })
        },

        gathering(resolve) {
          // 收款开户行 select_1540539501000_36076
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('收款开户行').then(response => { resolve(response.data) })
        }

      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>
